<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style>
  /* layui默认色：左侧导航#009688  默认按钮#009688 删除按钮#FF5722 */
  /* pbmod默认色：左侧导航linear-gradient(to right, #0099CC, #1E9FFF)  默认按钮#1E9FFF 删除按钮#f56c6c */
  /* 调用方式：var(--btn-color) */
  :root {
      --navcolor: {fun=get_config('systemnavcolor')};
      --navsubcolor: {fun=get_config('systemsubnavcolor')};
      --color: {fun=get_config('systemcolor')};
      --subcolor: {fun=get_config('systemsubcolor')};
      --danger-color: {fun=get_config('systemdangercolor')};
  }
</style>
<style type="text/css">    
#online{padding-top:0 !important;height:auto !important;}
#online li {border: 1px solid #e6e6e6;background: url('/apps/admin/view/default/images/imgbg.png');}
#online li img{vertical-align:middle;max-width:100%;max-height:106px;position:absolute;top:50%;transform:translate(-50%,-50%);left:50%;z-index:1;}
.tabs li:hover{color:#fff;background:var(--color);border-color:transparent;}
.tabs li:hover a{color:#fff}
.nonepic{text-align:center;color:#888;margin-top:60px;}
.heading{clear:both;margin:20px 10px;}
.heading h2{color:#333333;font-size:15px;margin:0px;margin-bottom:10px;font-weight:normal;}
.heading hr{border:none;position:relative;margin:0px;height:1px;width:100%;background:#e5e5e5;}
.heading hr:before{height:2px;background:#666666;content:"";position:absolute;top:-1px;width:60px;left:0px;}
.tabs li span.icon-del{ display: block; position: absolute; bottom:0; right:0;  z-index: 2; padding:5px 10px; font-weight: normal; background:rgba(0,0,0,0.7); font-size:12px; color:#fff; }
</style>
<link rel="stylesheet" href="{APP_THEME_DIR}/layui/css/layui.css?v=v2.5.4">
<link rel="stylesheet" href="{APP_THEME_DIR}/css/comm.css?v=v2.0.7">
<link href="{CORE_DIR}/extend/ueditor/dialogs/image/image.css?v=1.0" rel="stylesheet" type="text/css">

</head>
<body>
    <div class="ui-layout-west area manage-area" id="manage_area">
        <div id="tree" class="ztree"></div>
    </div>
    <div class="ui-layout-center" id="online">
        <ul id="list" class="tabs">
            
            {if( count([$common_pic])>0 )}
            <div class="heading">
                <h2>最新上传</h2>
                <hr>
            </div>
            {foreach $common_pic(key,value)}
                <li data-url="[value->url]">
                    <img src="[value->url]" />
                    {if( [$flag] )}
                    <span class="icon-del">删除</span>
                    {else}
                    <span class="icon"></span>
                    {/if}
                </li>
            {/foreach}
            {/if}
            
            {if( count([$list])>0 )}
            <div class="heading">
                 <h2>目录图片</h2>
                 <hr>
            </div>
            {if( count([$list])<=0 )}
                <div class='nonepic'>暂无图片可选择~</div>
            {/if}
            {foreach $list(key,value)}
                <li data-url="[value['path']]">
                    <img src="[value['path']]"  />
                    {if( [$flag] )}
                    <span class="icon-del">删除</span>
                    {else}
                    <span class="icon"></span>
                    {/if}
                </li>
            {/foreach}
            {/if}
            
        </ul>
    </div>
    <div class="layui-clear"><br></div>
    <div class="page">
        {$pagebar}
    </div>
    <script type="text/javascript" src="{APP_THEME_DIR}/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="{APP_THEME_DIR}/layui/layui.all.js?v=v2.5.4"></script>
    <script type="text/javascript">
        {if( [$flag] )}
        $(function(){
            $(document).on('click','#list li span.icon-del',function(){
                var img = $(this).parent('li').data('url');
                var that = $(this).parent('li');
                console.log(img);
                $.post('{url./admin/Media/delpic/}',{
                    img:img
                },function(msg){
                    console.log(msg);
                    if(msg.code==1){
                        layer.msg(msg.data);
                        that.remove();
                    }
                },'json')
            })
        });
        {else}
        // 记录选择的图片
        $(function(){
            $(document).on('click','#list li',function(){
                var num = '{$info.num}';
                if (1 == num) {
                    // 当数量为1时，仅可选择一张图片
                    $("#list li").each(function(){
                        $(this).removeClass("selected")
                    });
                }
                // 给点击的图片加上Class
                $(this).toggleClass("selected");
            })
        })
        {/if}
    </script>
</body>
</html>